<template>
	<view  class="view-siper">
		<swiper style="height: 100%;" class="swiper" :circular="true" :indicator-active-color="indicatorActiveColor" :datas="datas" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
		 :duration="duration">
			<swiper-item v-for="(item,index) of datas" :key="index">
				<image :style="{width:imageWidth,height:imageHeight}" :src="baseUrl + item.url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		name: "omSwiper",
		data() {
			return {
				baseUrl: app.globalData.url,
				swiperHeight:0,
				swiperWidth:0
			}
		},
		props: {
			indicatorActiveColor:{
				type:String,
				default:"#5697F4"
			},
			indicatorDots: {
				type: Boolean,
				default: true
			},
			autoplay: {
				type: Boolean,
				default: true
			},
			interval: {
				type: Number,
				default: 5000
			},
			duration: {
				type: Number,
				default: 800
			},
			datas: {
				type: Array,
				default: () => []
			}
		},
		computed:{
			imageHeight(){
				let _that = this
				return _that.swiperHeight+'px'
			},
			imageWidth(){
				let _that = this
				return _that.swiperWidth+'px'
			}
		},
		methods: {
		},
		mounted(){
			let _that = this
			let view = uni.createSelectorQuery().select(".swiper");
			view.boundingClientRect(res=>{
				_that.swiperHeight = res.height
				_that.swiperWidth = res.width
			}).exec()
		}
	}
</script>

<style scoped>
	.om-swiper-item-tips{
		width: 100%;
		position: absolute;
		top:0rpx;
		background: rgba(0,0,0,0.3)
	}
	.view-siper{
		width: 100%;
	}
</style>
